<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-07-07 14:04:00
 * @LastEditTime: 2022-09-22 11:22:44
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description:
 * @FilePath: \vue3-element-plus-web\src\views\Login\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="page-container">
    <div class="login-container">
      <div class="left-container">
        <div class="bg"></div>
      </div>
      <div class="login-form-container">
        <!-- <h3 class="title">{{ $t('login.title') }}</h3> -->
        <div class="logo">
          <img src="../../assets/images/login/logo-small.png" alt="">
          <h3 class="title">My UI我的标题</h3>
        </div>
        <p class="desc">My UI是西湖区最具影响力的 Web 设计规范</p>

        <el-tabs v-model="activeName" class="login-tabs" @tab-click="handleTabsClick">
          <el-tab-pane label="账户密码登录" name="first">
            <account-login></account-login>
          </el-tab-pane>
          <el-tab-pane label="手机号登录" name="second">
            <mobile-number-login></mobile-number-login>
          </el-tab-pane>
        </el-tabs>

        <div class="handle-txt">
          <span class="left-txt">
            <router-link to="/">
              其他登录方式
            </router-link>
          </span>
          <span class="right-txt">
            <router-link to="/">
              注册账户
            </router-link>
          </span>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { AccountLogin, MobileNumberLogin } from './components'

export default {
  name: 'login',
  components: {
    AccountLogin,
    MobileNumberLogin
  },
  data() {
    return {
      activeName: 'first'
    }
  },
  watch: {
  },
  created() {
    // console.log('当前系统语言：')
    // console.log(this.language)
    // this.refreshVerifyCode()
  },
  methods: {
    handleTabsClick() {

    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import '../../styles/login.scss';

</style>
